<template>
	<div class="login-page">
		<div class="wrap">
			<h2><img alt="zp logo" src="../assets/img/logo-mini.svg" />登陆</h2>
			<h3>欢迎来到API管理系统</h3>
			<form @keyup.enter="onLogin">
				<input placeholder="邮箱" v-model="email" />
				<input placeholder="密码" v-model="pwd" type="password" />
				<button type="button" class="gradient-primary" :disabled="loading" @click="onLogin"><i v-if="loading" class="iconfont spin">&#xe6d1;</i>登陆</button>
				<!-- <router-link class="forget" to="/forget">忘记密码？</router-link> -->
			</form>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				loading: false,
				email: '',
				pwd: ''
			}
		},
		methods:{
			async onLogin(){
				if(!this.email){
					this.$Message({type:'warning',content:'邮箱不能为空'})
					return false
				}
				if(!this.pwd){
					this.$Message({type:'warning',content:'密码不能为空'})
					return false
				}
				this.loading = true
				await this.$http.post('/api/login', {email:this.email,pwd:this.pwd})
				.then(res=>{
					this.$global.user = res
					this.$storage.set('user', res)
					this.$storage.set('token', res.token)
					this.$router.push('/')
				})
				.catch(err=>{
					console.log('登陆错误：', err)
				})
				this.loading = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../assets/css/base.scss';
	.login-page{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;
		.wrap{
			padding: 40px;
			background: #fff;
			width: 410px;
			max-width: 100%;
			box-sizing: border-box;
			img{
				height: 30px;
			}
			h3{
				margin: 30px 0 10px;
			}
			h2{
				font-weight: 400;
				display: flex;
				align-items: center;
				img{
					margin-right: 20px;
				}
			}
		}
		input, button{
			width: 100%;
			margin: 30px 0 0;
			padding: 1.2em;
			box-sizing: border-box;
		}
		input{
			border: solid 1px #eee;
		}
		button{
			border: 0;
			border-radius: 5px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.spin{
			color: #fff;
			font-size: 18px;
			margin-right: 5px;
		}
		.forget{
			margin-top: 30px;
			font-size: 12px;
			display: block;
			text-align: center;
			&:hover{
				color: $primary;
			}
		}
	}
</style>
